<template>
  <div class="command-pod" :class="{ expanded: expanded }">
    <div class="pod-circle" @click="toggleExpanded">
      <div class="pod-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
          <path d="M0 0h24v24H0z" fill="none" />
          <path
            d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
        </svg>
      </div>
    </div>
    <transition name="slide-fade">
      <div class="pod-menu" v-show="expanded">
        <!-- 界面控制区域 -->
        <div class="menu-section">
          <div class="section-header" @click="toggleSection('controls')">
            <h5>界面控制</h5>
            <div class="collapse-icon" :class="{ rotated: sections.controls }">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#666">
                <path d="M7 10l5 5 5-5z" />
              </svg>
            </div>
          </div>
          <transition name="slide">
            <div class="section-content" v-show="!sections.controls">
              <div class="control-item" v-for="(control, key) in controls" :key="key">
                <label class="switch">
                  <input type="checkbox" :disabled="control.disabled" :checked="control.visible"
                    @change="panelControlChange(control)">
                  <span class="slider round"></span>
                </label>
                <span class="control-label">{{ control.label }}</span>
                <span v-if="control.disabled" class="badge">即将上线</span>
              </div>
            </div>
          </transition>
        </div>

        <!-- 常用工具区域 -->
        <div class="menu-section">
          <div class="section-header" @click="toggleSection('tools')">
            <h5>常用工具</h5>
            <div class="collapse-icon" :class="{ rotated: sections.tools }">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#666">
                <path d="M7 10l5 5 5-5z" />
              </svg>
            </div>
          </div>
          <transition name="slide">
            <div class="section-content" v-show="!sections.tools">
              <div class="tool-item" v-for="(tool, index) in tools" :key="index">
                <label class="switch">
                  <input type="checkbox" :checked="tool.visible" @change="toolChange(tool)">
                  <span class="slider round"></span>
                </label>
                <div class="tool-info">
                  
                  <span class="tool-label">{{ tool.label }}</span>
                </div>
              </div>
            </div>
          </transition>
        </div>
        <!-- 状态显示 -->
        <div class="status-bar">
          <span v-if="activeTool">当前工具: {{ activeToolLabel }}</span>
          <span v-else>就绪</span>
        </div>
      </div>
    </transition>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import { MapControl, MapTool } from '@/types/map';
import {
  createControl,
} from '@/config/mapConfiguration';
declare const AMap: any;
interface SectionState {
  controls: boolean; // true表示折叠
  tools: boolean;    // true表示折叠
}

@Component
export default class CommandPod extends Vue {
  @Prop({ type: Boolean, default: false }) expanded!: boolean;
  @Prop({ type: Object, required: true }) controls!: Record<string, MapControl>;
  @Prop({ type: Array, required: true }) tools!: MapTool[];
  @Prop() mapInstance;
  private activeTool: string | null = null;
  private sections: SectionState = {
    controls: false,
    tools: false
  };

  toolChange(tool: any) {
    tool.visible = !tool.visible;
  }

  panelControlChange(control: any) {
    control.visible = !control.visible;
    if (control.controlType && this.mapInstance) {
      if (!control.control) {
   
        AMap.plugin(['AMap.ControlBar', 'AMap.ToolBar','AMap.MapType'], () => {
             control.control = createControl(control.controlType);
        });

      }
      if (control.visible) {
        this.mapInstance.addControl(control.control);
      } else {
        this.mapInstance.removeControl(control.control);
      }
    }
    this.$emit('panel-control-change', control)
  }

  get activeToolLabel(): string {
    if (!this.activeTool) return '';
    const tool = this.tools.find(t => t.name === this.activeTool);
    return tool ? tool.label : '';
  }

  toggleSection(section: keyof SectionState) {
    this.sections[section] = !this.sections[section];
  }

  mounted() {
    // 初始化控制项
     // 初始化控制项但不改变可见状态
  Object.keys(this.controls).forEach(key => {
    const control = this.controls[key];
    if (control.controlType && this.mapInstance && control.visible && !control.control) {
      AMap.plugin(['AMap.ControlBar', 'AMap.ToolBar','AMap.MapType'], () => {
        control.control = createControl(control.controlType);
        this.mapInstance.addControl(control.control);
      });
    }
  });
    // 监听工具变化
    this.$on('tool-change', (toolName: string) => {
      this.activeTool = toolName;
    });
  }

  @Emit('toggle-expanded')
  toggleExpanded() {
    // 当展开面板时，默认展开所有区块
    if (!this.expanded) {
      // 当展开面板时，将控件区块折叠
      this.sections.controls = false;
      // 当展开面板时，将工具区块折叠
      this.sections.tools = false;
    }
  }
}
</script>

<style scoped>
.command-pod {
  position: fixed;
  left: 10px;
  bottom: 40px;
  z-index: 1000;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.pod-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1890ff, #0050b3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1001;
}

.pod-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.6);
}

.pod-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pod-menu {
  position: absolute;
  bottom: 50px;
  left: 0;
  background: white;
  padding: 1px;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  pointer-events: auto;
  font-size: 14px;
  z-index: 1000;
}

.menu-section {
  margin-bottom: 10px;
  border-radius: 0px;
  overflow: hidden;
}

.menu-section:last-child {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 10px;
  background: #f5f9ff;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.section-header:hover {
  background: #e6f7ff;
}

.section-header h5 {
  margin: 0;
  color: #262626;
  font-weight: 600;
  font-size: 12px;
}

.collapse-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.collapse-icon.rotated {
  transform: rotate(180deg);
}

.section-content {
  padding: 10px 16px;
  max-height: 160px;
  overflow-y: auto;
  background: white;
}

.control-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
  padding: 2px 0;
  border-bottom: 1px solid #f0f0f0;
}

.control-item:last-child {
  border-bottom: none;
}

.control-label {
  margin-left: 12px;
  color: #595959;
  font-size: 14px;
  flex-grow: 1;
}

.tool-item {
  display: flex;
  align-items: center;
  margin: 2px 0;
  padding: 2px 0;
}

.tool-info {
  display: flex;
  align-items: center;
  margin-left: 12px;
  flex-grow: 1;
}

.tool-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
  font-size: 12px;
}

.tool-label {
  color: #595959;
  font-size: 12px;
}

.badge {
  background: #f0f0f0;
  color: #8c8c8c;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

.status-bar {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  color: #8c8c8c;
  font-size: 12px;
  text-align: center;
}

/* 开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
}

input:checked+.slider {
  background-color: #1890ff;
}

input:checked+.slider:before {
  transform: translateX(20px);
}

.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

/* 动画效果 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
  max-height: 300px;
  overflow: hidden;
}

.slide-enter,
.slide-leave-to {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
</style>